<template>
  <div class="trans-mng">
    <Form ref="transRef">
      <CellGroup>
        <Field
          :model-value="platformMap[paramsName.platformType]"
          is-link readonly clickable label="平台"
          name="syncType" placeholder="请选择平台"
          :disabled="statePlatform.loading"
          :rules="[{ required: true, message: '请选择平台' }]"
          @click="handleShowCardModal">
          <template #right-icon>
            <Tag type="primary">
              <span
                v-if="!statePlatform.loading">平台</span>
              <Loading
                v-if="statePlatform.loading"
                :size="12" />
            </Tag>
          </template>
        </Field>
        <SearchCard name="cardProductName"
          v-model:value="paramsName.cardProductName"
          @change="handleNameChange"
          @clear="handleClear"
          :cur-platform="paramsName.platformType"
          :state="stateAllName" />
        <Field v-model="paramsOrder.faceValue"
          is-link readonly clickable
          name="faceValue" label="面值"
          placeholder="请选择面值"
          :disabled="stateValueFace.loading"
          :rules="[{ required: true, message: '请选择面值' }]"
          @click="handleShowFaceModal">
          <template #right-icon>
            <Tag type="primary">
              <span
                v-if="!stateValueFace.loading">元</span>
              <Loading
                v-if="stateValueFace.loading"
                :size="12" />
            </Tag>
          </template>
        </Field>
        <Field v-model="paramsOrder.userName"
          name="userName" label="用户名"
          placeholder=" 请输入用户名"
          :rules="[{ required: true, message: '请输入用户名' }]" />
        <div class="btn-group">
          <Button type="warning" block
            @click="handleAllTrans">一键转移所有订单</Button>
          <Button type="primary" block
            :loading="stateOrder.loading"
            @click="handleQuery">查询转移订单</Button>
        </div>
      </CellGroup>
    </Form>
    <div class="order-list">
      <template
        v-if="!stateOrder.loading && stateOrder.data.length">
        <OrderItemBox
          v-for="order in stateOrder.data"
          :key="order.customOrderNo"
          :order="order"
          @handle-trans="handleTrans" />
      </template>
      <SkeletonCard v-if="stateOrder.loading" />
      <Empty description="暂无数据"
        v-if="!stateOrder.loading && !stateOrder.data.length" />
    </div>
  </div>
  <Modals />
</template>
<script setup lang="ts">
import {
  Button,
  CellGroup, Empty, Field, Form, Loading, showFailToast, Tag,
} from 'vant';
import { onMounted } from 'vue';

import SkeletonCard from '@/components/SkeletonCard.vue';

import useAppConfg from '../../AppConfig/hooks/useAppConfg';
import type { PlatformTypeItem } from '../../AppConfig/models/PlatformConfig';
import Modals, {
  ModalFaceValueList, ModalPlatformType, ModalTransformAllOrder, ModalTransformOrder,
} from '../components';
import OrderItemBox from '../components/OrderItemBox.vue';
import SearchCard from '../components/SearchCard.vue';
import useFaceValueList from '../hooks/useTransFaceValue';
import useTransName from '../hooks/useTransName';
import useTransOrder from '../hooks/useTransOrder';
import type TransOrderItem from '../models/TransOrderItem';
import type { TransFaceValueItem, TransNameItem } from '../models/TransSelectQuery';

const {
  statePlatform,
  platformMap,
  fetchSyncList,
} = useAppConfg();

const {
  params: paramsName,
  stateAll: stateAllName,
  fetchAllData: fetchAllDataName,
} = useTransName();

const {
  params: paramsValueFace,
  fetchData: fetchValueFace,
  state: stateValueFace,
} = useFaceValueList();

const {
  transRef,
  params: paramsOrder,
  state: stateOrder,
  fetchData: fetchOrder,
} = useTransOrder();

onMounted(async () => {
  await Promise.all([
    fetchSyncList(),
    fetchAllDataName(),
  ]);
});

const handleShowCardModal = () => {
  ModalPlatformType.show({
    title: '选择平台',
    options: statePlatform.value.data,
    value: paramsName.value.platformType,
    emit: async (option: PlatformTypeItem) => {
      paramsName.value.platformType = option.platformType;
      paramsName.value.cardProductName = '';
      paramsOrder.value.faceValue = 0;
      await fetchAllDataName();
    },
  });
};

const handleNameChange = async (prod: TransNameItem) => {
  paramsName.value.cardProductName = prod.cardProductName;
  paramsValueFace.value.cardProductId = prod.cardProductId;
  await fetchValueFace();
  paramsOrder.value.cardProductId = prod.cardProductId;
  paramsOrder.value.faceValue = 0;
};

const handleClear = () => {
  stateValueFace.value.data = [];
  paramsOrder.value.faceValue = 0;
};

const handleShowFaceModal = () => {
  if (!stateValueFace.value.data.length) {
    showFailToast('请先选择产品');
    return;
  }
  ModalFaceValueList.show({
    title: '选择面值',
    options: stateValueFace.value.data,
    value: paramsOrder.value.faceValue,
    emit: (option: TransFaceValueItem) => {
      paramsOrder.value.faceValue = option.faceValue;
    },
  });
};

const handleQuery = async () => {
  try {
    if (!stateValueFace.value.data.length) {
      showFailToast('请先选择产品');
      return;
    }
    if (!paramsOrder.value.faceValue) {
      showFailToast('请先选择面值');
      return;
    }
    await transRef.value.validate();
    await fetchOrder();
  } catch (error) {
    //
  }
};

const handleTrans = (order: TransOrderItem) => {
  ModalTransformOrder.show({
    title: '转移订单',
    record: order,
    reload: async () => {
      await fetchOrder();
    },
  });
};

const handleAllTrans = async () => {
  try {
    if (!stateValueFace.value.data.length) {
      showFailToast('请先选择产品');
      return;
    }
    if (!paramsOrder.value.faceValue) {
      showFailToast('请先选择面值');
      return;
    }
    await transRef.value.validate();
    await fetchOrder();
    if (!stateOrder.value.data.length) {
      showFailToast('暂无订单可转移');
      return;
    }
    ModalTransformAllOrder.show({
      title: '转移订单',
      state: stateOrder.value,
      userName: paramsOrder.value.userName,
      reload: async () => {
        await fetchOrder();
      },
    });
  } catch (error) {
    //
  }
};
</script>
<style lang="less" scoped>
.trans-mng {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .btn-group {
    display: flex;
    padding: 8px 16px;
    gap: 5px;
  }

  .order-list {
    padding: 8px 16px;
  }
}
</style>
